<template>
    <div class="index_container">
        <div class="login_title">
            <div class="login_title_icon"></div>
            数据中心机房监控可视化平台
        </div>
        <div class="login_interface">
            <div class="login_interface_title">
                <div class="login_interface_title_1">
                    欢迎登录
                </div>
                <div class="login_interface_title_2">
                    welcome to login
                </div>
            </div>
            <div class="form">
                <el-form ref="loginFormRef" :model="loginForm" :rules="data.loginRules" class="login-form">
                    <el-form-item prop="userName">
                        <el-input v-model="loginForm.userName" type="text" auto-complete="off" placeholder="账号">
                            <template #prefix>
                                <el-icon color="#fff" size="20">
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
                            @keyup.enter.native="handleLogin">
                            <template #prefix>
                                <el-icon color="#fff" size="20">
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-checkbox color="#fff" v-model="loginForm.rememberMe"
                        style="margin: 0px 0px 20px 0px">记住密码</el-checkbox>
                    <el-form-item style="width: 100%">
                        <el-button :loading="data.loading" size="large" type="primary" style="width: 100%"
                            @click.native.prevent="handleLogin">
                            <span v-if="!data.loading">登 录</span>
                            <span v-else>登 录 中...</span>
                        </el-button>
                        <div style="float: right" v-if="data.register">
                            <router-link class="link-type" :to="'/register'">立即注册</router-link>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup>
import {
    defineComponent,
    ref,
    reactive,
    computed,
    toRefs,
    onMounted
} from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { Lock, User } from '@element-plus/icons-vue'
import store from 'store';
import useUserStore from '@/stores/user'
const userStore = useUserStore();
const getRoute = useRoute()
const router = useRouter()
const data = reactive({
    loginRules: {
        userName: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
        password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
        code: [{ required: true, trigger: 'change', message: '请输入验证码' }],
    },
    loading: false,
    // 注册开关
    register: false,
    captchaEnabled: false,
    redirect: "/"
})

const loginForm = reactive({
    userName: '',
    password: '',
    rememberMe: false,
    code: '',
    uuid: '',
});

let loginFormRef = ref(null)


onMounted(() => {
    getCookie()
})

async function getCookie() {
    const username = store.get("username");
    const password = store.get("password");
    const rememberMe = store.get("rememberMe");
    loginForm.value = {
        username: (username === null || username === undefined) ? loginForm.userName : username,
        password: (password === null || password === undefined) ? loginForm.password : decrypt(password),
        rememberMe: (rememberMe === null || rememberMe === undefined) ? false : Boolean(rememberMe)
    };
}

function getCode() {
    getCodeImg().then(res => {
        captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (captchaEnabled.value) {
            codeUrl.value = "data:image/gif;base64," + res.img;
            loginForm.value.uuid = res.uuid;
        }
    });
}

const handleLogin = () => {
    loginFormRef.value.validate(valid => {
        if (valid) {
            data.loading = true;
            if (loginForm.rememberMe) {
                store.set("username", loginForm.userName);
                //xxxx
                store.set("password", loginForm.password);
                store.set("rememberMe", loginForm.rememberMe);
            } else {
                store.remove("username");
                store.remove("password");
                store.remove("rememberMe");
            }
            // 调用action的登录方法
            userStore.login(loginForm).then((res) => {
                const query = getRoute.query;
                const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
                    if (cur !== "redirect") {
                        acc[cur] = query[cur];
                    }
                    return acc;
                }, {});
                router.push({ path: data.redirect || "/", query: otherQueryParams });
            }).catch((e) => {
                data.loading = false;
                // 重新获取验证码
                if (data.chaEnabled) {
                    getCode();
                }
            });
        }
    });
}
</script>
<style lang="scss" scoped>
.index_container {
    min-height:720px;
    min-width:1280px;
    height: 100%;
    width: 100%;
    background: url(@/assets/images/login_bg.png);
    background-size: 100% 100%;
    .login_title {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 40px;
        left: 40px;
        display: flex;
        font-size: 32px;

        .login_title_icon {
            margin-right: 10px;
            width: 30px;
            height: 30px;
            background: url(@/assets/images/login_title_icon.png);
            background-size: 100% 100%;
        }
    }

    .login_interface {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        left: 60%;
        top: 20%;
        background: rgba(90, 133, 206, 0.5);
        border: 4px solid #486db1;
        border-radius: 10px;
        width: 440px;
        height: 570px;

        .login_interface_title {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .login_interface_title_1 {
            color: #ffffff;
            font-size: 24px;
        }

        .login_interface_title_2 {
            margin-top: 10px;
            color: #ffffff;
            font-size: 14px;
            font-weight: bold;
        }
    }

    .form {
        width: 100%;
        padding: 40px 40px;
    }
}

:deep {
    .el-input__wrapper {
        background: rgba(31, 59, 112, 0.5);
        box-shadow: 0 0 0 1px rgb(64, 158, 255);
        height: 40px;
    }

    .el-input__inner {
        font-size: 16px;
        color: #fff;
    }

    .el-input__prefix {
        color: #fff;
    }

    .el-checkbox__inner {
        border: 1px solid #fff;
    }

    .el-checkbox__label {
        color: #fff;
    }
}
</style>